<template>
  <view class="navTabBox">
    <view class="longTab">
      <scroll-view
        scroll-x="true"
        scroll-with-animation
        :scroll-left="tabLeft"
        class="scroll-view"
      >
        <view
          class="longItem"
          :style="{ width: isWidth + 'px' }"
          :data-index="index"
          :class="index === tabClick ? 'click' : ''"
          v-for="(item, index) in tabTitle"
          :key="index"
          :id="'id' + index"
          @click="longClick(index, item)"
          >{{ labelText(item) }}</view
        >
        <view
          class="underlineBox"
          :style="{
            transform: 'translateX(' + isLeft + 'px)',
            width: isWidth + 'px',
          }"
        >
          <view class="underline"></view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  name: "navTab",
  props: {
    tabTitle: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      tabClick: 0, //导航栏被点击
      isLeft: 0, //导航栏下划线位置
      isWidth: 0, //每个导航栏占位
      tabLeft: 0,
    };
  },
  created() {
    var that = this;
    // 获取设备宽度
    uni.getSystemInfo({
      success(e) {
        if (that.tabTitle.length <= 5) {
          that.isWidth = e.windowWidth / that.tabTitle.length; //宽度除以导航标题个数=一个导航所占宽度
        } else {
          that.isWidth = e.windowWidth / 5;
        }
      },
    });
  },
  methods: {
    // 导航栏点击
    longClick(index, item) {
      if (this.tabTitle.length > 5) {
        var tempIndex = index - 2;
        tempIndex = tempIndex <= 0 ? 0 : tempIndex;
        this.tabLeft = (index - 2) * this.isWidth; //设置下划线位置
      }
      this.tabClick = index; //设置导航点击了哪一个
      this.isLeft = index * this.isWidth; //设置下划线位置
      this.$emit("changeTab", index, item); //设置swiper的第几页
      // this.$parent.currentTab = index //设置swiper的第几页
    },
    labelText(item) {
      return typeof item == "string" ? item : item.label;
    },
    underlineBoxStyle(isLeft, isWidth) {
      return "transform:translateX(" + isLeft + "px);width:" + isWidth + "px";
    },
    longItemStyle(isWidth) {
      // return "width:" + isWidth + "px";
      return { width: isWidth + "px" };
    },
  },
};
</script>

<style lang="scss">
.navTabBox {
  width: 100vw;
  color: $uni-text-color;
  .click {
    color: $uni-text-color;
  }
  .longTab {
    width: 100%;
    .scroll-view {
      white-space: nowrap;
      display: flex;
    }
    .longItem {
      height: $navTabHeight;
      display: inline-block;
      line-height: $navTabHeight;
      text-align: center;
      font-size: 28rpx;
    }
    .underlineBox {
      height: 3px;
      width: 20%;
      display: flex;
      align-content: center;
      justify-content: center;
      transition: 0.5s;
      .underline {
        width: 84upx;
        height: 4px;
        background-color: $themeColor;
      }
    }
  }
}
</style>
